<template>
	<view class="order-item">
		<view class="item-top">
			<view class="top-l">订单编号:{{ '  ' + info.trade_no }}</view>
			<view :class="[infoPayStatus == 'wait' && 'top-r-red']">{{ payArr[infoPayStatus] }}</view>
		</view>
		<view class="item-center">
			<image class="center-l" :src="ossurl(info.orders_spot.face)" />
			<view class="center-r">
				<view class="center-title">{{ info.orders_spot.name + ' , ' + info.title }}</view>
				<view class="center-original">
					原价:
					<text class="price">￥{{ info.price }}</text>
				</view>
				<view>
					优惠:
					<text class="price">￥{{ info.discount_amount }}</text>
				</view>
			</view>
		</view>
		<view class="item-bottom">
			<view class="bottom-l">
				需付款：
				<text class="bottom-price">￥{{ info.order_price }}</text>
			</view>
			<view v-if="info.pay_state == 'paid'" class="bottom-r" @click="toTaste">开始体验</view>
			<view v-else-if="info.pay_state == 'fail' || infoPayStatus == 'fail'" class="bottom-r" @click="toTaste">立即体验</view>
			<view v-else class="bottom-r" @click="toPay">去付款</view>
		</view>
	</view>
</template>

<script>
	import { navigateTo, navigateBack } from '@/hooks';
	import { orderPay } from '@/api/home.js';
	import { payNow } from '@/utils/index.js';
	import { ossurl } from '@/utils/index';

	export default {
		data() {
			return {
				navigateTo,
				infoPayStatus: {},
				payArr: {
					wait: '待付款',
					paid: '已完成',
					fail: '已关闭',
				},
			};
		},
		props: {
			info: {
				type: Object,
				default: {},
			},
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			},
		},
		mounted() {
			if (this.info.pay_state !== 'paid' || this.info.pay_state !== 'fail') {
				this.isFinish();
			}
		},
		methods: {
            ossurl,
			isFinish() {
				let currentTime = new Date().getTime();
				let endTime = new Date(this.info.pay_end_time).getTime();
				if (this.info.pay_state == 'paid') {
					this.infoPayStatus = 'paid';
				} else {
					if (currentTime > endTime) {
						this.infoPayStatus = 'fail';
					} else {
						this.infoPayStatus = 'wait';
					}
				}

				console.log(currentTime, endTime);
			},
			toPay() {
				let params = {
					pay_trade_no: this.info.trade_no,
				};
				orderPay(params).then((res) => {
					if (res.code == 200) {
						console.log(res.data);
						payNow(res.data);
					}
				});
			},
			toTaste() {
				if (this.info.pay_state == 'paid') {
					navigateTo(`/pagesA/ar_navigation/index?id=${this.info.spot_id}`);
				} else {
					navigateTo('/pagesA/ar_navigation/index');
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.order-item {
		padding: 20rpx 16rpx;
		margin-bottom: 24rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		background: #ffffff;
		border-radius: 24rpx;

		.item-top,
		.item-bottom {
			display: flex;
			justify-content: space-between;
		}

		.item-top {
			margin-bottom: 16rpx;
			color: #999;
			.top-r-red {
				color: #f54242;
			}
		}

		.item-center {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.center-l {
				width: 204rpx;
				height: 132rpx;
				margin-right: 24rpx;
				border-radius: 12rpx;
			}
			.center-title {
				margin-bottom: 12rpx;
				font-weight: 700;
				font-size: 28rpx;
				color: #3d3d3d;
			}
			.price {
				color: #3d3d3d;
			}
			.center-original {
				margin-bottom: 4rpx;
			}
		}

		.item-bottom {
			align-items: center;
			.bottom-price {
				color: #3d3d3d;
				font-weight: 700;
			}
			.bottom-r {
				width: 152rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				color: #fff;
				background: linear-gradient(90deg, #0fbcd6 0%, #0cca91 100%);
				border-radius: 40rpx;
			}
		}
	}
</style>
